<template>
  <div class="topbar">
    <div class="topbar-container">
      <div class="l">欢迎来到叩丁狼积分商城</div>
      <ul class="r">
        <li @click="hdclick">
          <img :src="userInfo.headImg" alt class="avater" />
          用户名：{{userInfo.nickName}}
        </li>
        <li>我的积分:{{userInfo.coin}}</li>
        <li>获取积分</li>
        <li>叩丁狼官网</li>
        <li class="login_btn" @click="login" v-show="!isLogined">登录</li>
        <li class="cart-btn" v-show="isLogined">
          <img src="../assets/img/cart.png" alt />
          <span>购物车</span>
          <strong>{{cartTotal}}</strong>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations,mapActions } from "vuex"
import { weixinLoginApi,userProfilesApi } from "../request/api"
export default {
  data() {
    return {

    }
  },
  // 我们用户点击同意后会刷新页面，并且第三方平台拿到微信开放平台发过来的code
  async created() {
    let code = this.$route.query.code
    // 当地址栏中没有code时候，表明是用手机号码登陆的方式
    if (!code){
      let mytoken = localStorage.getItem("x-auth-token")
      this.chanIsLogined(Boolean(mytoken))
      if(mytoken){
        // 处于登录的状态,去获取用户信息
        this. asyncChangeUserInfo()
      }else{
        // 处于不登录的状态,去初始化用户信息
        this.initUserInfo()
      }
      return
    } 
    //拿到code后扣叮狼那边 发起微信登录的请求像微信开放平台换取token
    let res = await weixinLoginApi({
      code: code,
    })
    console.log("_____________", res);
    if (res.code === 0) {
      alert("登录成功")//提示登陆成功
      localStorage.setItem("x-auth-token", res["x-auth-token"])//存储token
      this.chanIsLogined(true)//展示购物车按钮
      this.$router.push(this.$route.path)//刷新页面 清除code
      this.asyncChangeUserInfo()//获取用户信息并且存储到vuex中
      // 正常情况
    } else if (res.code === 400) {
      // 二维码失效， 提示用户要重新扫描
      alert("请重新扫码")
      this.toLogin(true)
    } else if (res.code === 407) {
      // 提示用户再用手机号码登陆一次
      alert("再用手机号码登陆一次")
      // 模态框显示出来
      this.toLogin(true)
      // 存储uuid，让用户用手机号码登录，让用户手机号和微信绑定
      localStorage.setItem("uuid", res.uuid)
    }
  },
  watch: {
    // 通过监听路由方式，切换登陆状态 这个方式在没有token的去情况下，不能更新的用户信息（方式一）
    "$route.path": {
      handler(newVal, oldVal) {
        let mytoken = localStorage.getItem("x-auth-token")
        if (mytoken) {
          this.chanIsLogined(true)//展示购物车按钮
        } else {
          this.chanIsLogined(false)//展示登录按钮
        }
      }
    }
  },
  computed: {
    ...mapState({
      isLogined: state => state.loginStatus.isLogined,
      cartTotal:state=>state.userInfo.cartTotal,
      userInfo:state=>state.userInfo.userInfo,
    })
  },
  methods: {
    ...mapMutations({
      toLogin: "login/toLogin",
      chanIsLogined: "loginStatus/chanIsLogined",
      chanIsShowToast: "toastStatus/chanIsShowToast",
      initUserInfo:"userInfo/initUserInfo"//初始化用户信息
    }),
    ...mapActions({
      asyncChangeUserInfo:"userInfo/asyncChangeUserInfo"
    }),
    login() {
      this.toLogin(true)
    },
    hdclick() {
      this.chanIsShowToast(true)
    }
  }
}
</script>
 
<style lang = "less" scoped>
.topbar {
  height: 40px;
  // background: #242B39;
  background-color: pink;

  .topbar-container {
    margin: auto;
    width: 1200px;
    height: 40px;
    line-height: 40px;
    color: #fff;
    font-size: 14px;
    background-color: green;
    display: flex;
    justify-content: space-between;
    // align-items: center;

    .r {
      display: flex;
      justify-content: space-between;

      li {
        padding: 0 10px;

        &.login_btn {
          width: 124px;
          height: 40px;
          background: #0a328e;
          text-align: center;
        }
        &.cart-btn {
          width: 124px;
          height: 40px;
          background: #0a328e;
          text-align: center;
          img {
            width: 20px;
            height: 19px;
            vertical-align: middle;
          }
          span {
            margin: 0 8px;
          }
          strong {
            width: 22px;
            height: 22px;
            line-height: 22px;
            display: inline-block;
            border-radius: 50%;
            background-color: #fd604d;
          }
        }

        .avater {
          width: 26px;
          height: 26px;
          border-radius: 50%;
          vertical-align: middle;
        }
      }
    }
  }
}
</style>